<template>
  <div class="loginIn">
    <div class="login">
      <div class="login-head">
        <span>账号登录</span>
      </div>
      <el-form :model="loginForm" ref="loginForm" label-width="70px" class="demo-ruleForm" :rules="rules">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="handleLoginIn">登录</el-button>
          <el-button @click="goSignUp">注册</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {mixin} from '../mixins/index'
import {loginIn,getCollectionById,getHistoryById,getPraiseById} from '../api/index'
export default {
  name:'login-in',
  mixins:[mixin],
  data(){
    return {
      loginForm:{
        username:'',
        password:'',
      },
      rules:{
        username:[
          {required:true,trigger:'blur',message:'请输入用户名'}
        ],
        password:[
          {required:true,trigger:'blur',message:'请输入密码'}
        ],
      }
    }
  },
  methods:{
    handleLoginIn(){
      let _this = this
      let params = new URLSearchParams()
      params.append('username',this.loginForm.username)
      params.append('password',this.loginForm.password)
      loginIn(params)
      .then(res =>{
        if(res.code == 1){
          _this.notify('登录成功','success')
          _this.$store.commit('setLoginIn',true)
          _this.$store.commit('setUserId',res.userMsg.id)
          _this.$store.commit('setUsername',res.userMsg.username)
          _this.$store.commit('setAvatar',res.userMsg.avatar)

          getCollectionById(res.userMsg.id)
            .then(res =>{
              var collection = res.videoIds.split('-')
              _this.$store.commit('setCollection',collection)
            })
          getHistoryById(res.userMsg.id)
            .then(res =>{
              var history = res.videoIds.split('-')
              _this.$store.commit('setHistory',history)
            })
          getPraiseById(res.userMsg.id)
            .then(res =>{
              var praise = res.videoIds.split('-')
              var commentPraise = res.commentIds.split('-')
              _this.$store.commit('setPraise',praise)
              _this.$store.commit('setCommentPraise',commentPraise)
            })
          setTimeout(function(){
            _this.goback(-1)
          },2000)
        }else{
          _this.notify('用户名或密码失败','error')
        }
      }).catch(err => {
        console.log(err);
      })
    },
    goSignUp(){
      this.$router.push({path:'/signUp'})
    },
  }
}
</script>

<style scoped>
@import '../assets/css/loginIn.css';
</style>